<template>
	<view class="neil-modal" @touchmove.stop.prevent="bindTouchmove" :class="{ 'neil-modal--show': isOpen }">
		<view class="neil-modal__mask" @click="clickMask"></view>
		<view class="neil-modal__container">
			<view class="neil-modal__header" v-if="title.length > 0" :style="{ textAlign: align }">{{ title }}</view>
			<view class="neil-modal__content" :class="content ? 'neil-modal--padding' : ''" :style="{ textAlign: align }">
				<template v-if="content">
					<text class="modal-content">{{ content }}</text>
				</template>
				<template v-else>
					<slot />
				</template>
			</view>
			<view class="neil-modal__footer">
				<view
					v-if="showCancel"
					class="neil-modal__footer-left"
					@click="clickLeft"
					:style="{ color: cancelColor, background: cancelBgColor }"
					hover-class="neil-modal__footer-hover"
					:hover-start-time="20"
					:hover-stay-time="70"
				>
					{{ cancelText }}
				</view>
				<view class="neil-modal__footer-right" @click="clickRight" :style="{ color: confirmColor, background: confirmBgColor }">{{ confirmText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'neil-modal',
	props: {
		title: {
			// 标题
			type: String,
			default: ''
		},
		titlealign: {
			// content 的对齐方式left/center/right
			type: String,
			default: 'center'
		},
		content: String, // 提示的内容
		align: {
			// content 的对齐方式left/center/right
			type: String,
			default: 'left'
		},
		cancelText: {
			// 取消按钮的文字，默认为"取消"
			type: String,
			default: '取消'
		},
		// 取消的背景颜色
		cancelBgColor: {
			type: String,
			default: 'none'
		},
		// 确认的背景颜色
		confirmBgColor: {
			type: String,
			default: 'none'
		},
		cancelColor: {
			// 取消按钮颜色
			type: String,
			default: '#afafaf'
		},
		confirmText: {
			// 确定按钮的文字，默认为"确定"
			type: String,
			default: '确定'
		},
		confirmColor: {
			// 确认按钮颜色
			type: String,
			default: '#0091FF'
		},
		showCancel: {
			// 是否显示取消按钮，默认为 true
			type: [Boolean, String],
			default: true
		},
		show: {
			// 是否显示模态框
			type: [Boolean, String],
			default: false
		},
		autoClose: {
			// 点击遮罩是否自动关闭弹窗
			type: [Boolean, String],
			default: true
		}
	},
	data() {
		return {
			isOpen: false
		};
	},
	watch: {
		show(val) {
			this.isOpen = val;
		}
	},
	created() {
		this.isOpen = this.show;
	},
	methods: {
		callPhoneNum(phone) { 
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		bindTouchmove() {},
		clickLeft() {
			setTimeout(() => {
				this.$emit('cancel');
			}, 200);
			this.closeModal();
		},
		clickRight() {
			// setTimeout(() => {

			// }, 200)
			this.$emit('confirm');
			this.closeModal();
		},
		clickMask() {
			if (this.autoClose) {
				this.closeModal();
			}
		},
		closeModal() {
			this.showAnimation = false;
			this.isOpen = false;
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss">
$bg-color-mask: rgba(0, 0, 0, 0.5); //遮罩颜色
$bg-color-hover: #f1f1f1; //点击状态颜色

.neil-modal {
	position: fixed;
	visibility: hidden;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	transition: visibility 200ms ease-in;

	&.neil-modal--show {
		visibility: visible;
	}

	&__header {
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 18upx 24upx;
		line-height: 1.5;
		color: #333;
		font-weight: bold;
		font-size: 32upx;
		text-align: center;

		&::after {
			content: ' ';
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 1px;
			border-top: 1px solid #e5e5e5;
			transform-origin: 0 0;
			transform: scaleY(0.5);
			
		}
	}

	&__container {
		position: absolute;
		z-index: 300;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: transform 0.3s;
		width: 540upx;
		border-radius: 20upx;
		background-color: #fff;
		overflow: hidden;
		opacity: 0;
		transition: opacity 200ms ease-in;
	}

	&__content {
		position: relative;
		color: #333;
		font-size: 30upx;
		box-sizing: border-box;
		line-height: 1.5;
        padding: 18upx 24upx;
		&::after {
			content: ' ';
			position: absolute;
			left: 0;
			bottom: -1px;
			right: 0;
			height: 1px;
			border-bottom: 1px solid #e5e5e5;
			transform-origin: 0 0;
			transform: scaleY(0.5);
		}
	}

	&__footer {
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333;
		font-size: 32upx;
		display: flex;
		flex-direction: row;
		font-weight: bold;
		&-left,
		&-right {
			position: relative;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 88upx;
			font-size: 30upx;
			line-height: 88upx;
			text-align: center;
			// background-color:#0091FF ;
			color: #333;
		}

		&-right {
			color: #007aff;

			color: #fff;
		}

		&-left::after {
			content: ' ';
			position: absolute;
			right: -1px;
			top: 0;
			width: 1px;
			bottom: 0;
			border-right: 1px solid #e5e5e5;
			transform-origin: 0 0;
			transform: scaleX(0.5);
		}

		&-hover {
			background-color: $bg-color-hover;
		}
	}

	&__mask {
		display: block;
		position: absolute;
		z-index: 300;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: $bg-color-mask;
		opacity: 0;
		transition: opacity 200ms ease-in;
		&.neil-modal--show {
			opacity: 1;
		}
	}

	&--padding {
		padding: 32upx 24upx;
		min-height: 90upx;
	}
	&--show {
		.neil-modal__container,
		.neil-modal__mask {
			opacity: 1;
		}
	}
}
</style>
